<!-- 节点树 -->
<div v-if="getType() == 'int'" class="prop-node-int">
    <ui-label class="int-label" slot="label">{{getName()}}</ui-label>
    <ui-num-input class="int-input" step="1" preci="0" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-num-input>
</div>

<div v-else-if="getType() == 'float'" class="prop-node-float">
    <ui-label class="float-label" slot="label">{{getName()}}</ui-label>
    <ui-num-input class="float-input" step="0.1" preci="1" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-num-input>
</div>

<div v-else-if="getType() == 'string'" class="prop-node-string">
    <ui-label class="string-label" slot="label">{{getName()}}</ui-label>
    <ui-input class="string-input" :value="getValue()" @confirm="onValueChange($event.target.value)"></ui-input>
</div>

<div v-else-if="getType() == 'boolean'" class="prop-node-boolean">
    <ui-label class="boolean-label" slot="label">{{getName()}}</ui-label>
    <ui-select class="boolean-select" :value="getValue()" @confirm="onValueChange($event.target.value)">
        <option value="true">true</option>
        <option value="false">false</option>
    </ui-select>
</div>

<div v-else-if="getType() == 'vec2'" class="prop-node-vec2">
    <ui-label class="vec2-label" slot="label">{{getName()}}</ui-label>
    <div class="input-x">
        <ui-label slot="label">x</ui-label>
        <ui-num-input step="1" preci="0" :value="getValue().x"
            @confirm="onValueChangeX($event.target.value)"></ui-num-input>
    </div>
    <div class="input-y">
        <ui-label slot="label">y</ui-label>
        <ui-num-input step="1" preci="0" :value="getValue().y"
            @confirm="onValueChangeY($event.target.value)"></ui-num-input>
    </div>
</div>

<div v-else-if="getType() == 'vec3'" class="prop-node-vec3">
    <ui-label class="vec3-label" slot="label">{{getName()}}</ui-label>
    <div class="input-x">
        <ui-label slot="label">x</ui-label>
        <ui-num-input step="1" preci="0" :value="getValue().x"
            @confirm="onValueChangeX($event.target.value)"></ui-num-input>
    </div>
    <div class="input-y">
        <ui-label slot="label">y</ui-label>
        <ui-num-input step="1" preci="0" :value="getValue().y"
            @confirm="onValueChangeY($event.target.value)"></ui-num-input>
    </div>
    <div class="input-z">
        <ui-label slot="label">z</ui-label>
        <ui-num-input step="1" preci="0" :value="getValue().z"
            @confirm="onValueChangeZ($event.target.value)"></ui-num-input>
    </div>
</div>

<div v-else-if="getType() == 'size'" class="prop-node-size">
    <ui-label class="size-label" slot="label">{{getName()}}</ui-label>
    <div class="input-x">
        <ui-label slot="label">width</ui-label>
        <ui-num-input step="1" preci="0" :value="getValue().width"
            @confirm="onValueChangeX($event.target.value)"></ui-num-input>
    </div>
    <div class="input-y">
        <ui-label slot="label">height</ui-label>
        <ui-num-input step="1" preci="0" :value="getValue().height"
            @confirm="onValueChangeY($event.target.value)"></ui-num-input>
    </div>
</div>

<div v-else-if="getType() == 'color'" class="prop-node-color">
    <ui-label class="color-label" slot="label">{{getName()}}</ui-label>
    <ui-color class="color-input" :value="JSON.stringify(getValue())"
        @confirm="onValueChange($event.target.value)"></ui-color>
</div>

<div v-else-if="getType() == 'enum'" class="prop-node-enum">
    <ui-label class="enum-label" slot="label">{{getName()}}</ui-label>
    <ui-select class="enum-select" :value="getValue()" @confirm="onValueChange($event.target.value)">
        <option v-for="(value, key) in props.format" :value="key">{{key}}</option>
    </ui-select>
</div>

<div v-else-if="getType() == 'asset'" class="prop-node-asset">
    <ui-label class="asset-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="asset-input" droppable="cc.Asset" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'spriteframe'" class="prop-node-spriteframe">
    <ui-label class="spriteframe-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="spriteframe-input" droppable="cc.SpriteFrame" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'prefab'" class="prop-node-prefab">
    <ui-label class="prefab-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="prefab-input" droppable="cc.Prefab" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'jsonAsset'" class="prop-node-jsonAsset">
    <ui-label class="jsonAsset-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="jsonAsset-input" droppable="cc.JsonAsset" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'particle'" class="prop-node-particle">
    <ui-label class="particle-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="particle-input" droppable="cc.ParticleAsset" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'animation'" class="prop-node-animation">
    <ui-label class="animation-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="animation-input" droppable="cc.AnimationClip" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'audio'" class="prop-node-audio">
    <ui-label class="audio-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="audio-input" droppable="cc.AudioClip" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'skeleton'" class="prop-node-skeleton">
    <ui-label class="skeleton-label" slot="label">{{getName()}}</ui-label>
    <ui-asset class="skeleton-input" droppable="cc.Skeleton" :value="getValue()"
        @confirm="onValueChange($event.target.value)"></ui-asset>
</div>

<div v-else-if="getType() == 'entity'" class="prop-node-entity" @dragover.prevent @drop="handleEntityDrop">
    <ui-label class="entity-label" slot="label">{{getName()}}</ui-label>
    <div class="entity-drop-area" :class="{ 'has-entity': !!getValue() }">
        <template v-if="getValue()">
            <ui-label :value="getEntityNameAndAlias(getValue())"></ui-label>
            <ui-icon value="close" @click.stop="clearEntity"></ui-icon>
        </template>
        <ui-label v-else value="拖动实体到此处"></ui-label>
    </div>
</div>

<div v-else-if="getType() == 'object'" class="prop-node-object">
    <div class="object-header" :class="{collapsed: !isExpanded}" @click="toggleExpand">
        <div class="prop-arrow" :class="{expanded: isExpanded}"></div>
        <ui-label>{{getName()}}</ui-label>
    </div>
    <div class="object-content" :class="{collapsed: !isExpanded}">
        <prop-node v-for="(childProp, key) in props.children" :key="key" :propname="key" :props="childProp"
            :datavalue="getValue(key)" @change="onChildValueChange">
        </prop-node>
    </div>
</div>

<div v-else-if="getType() == 'array'" class="prop-node-array">
    <div class="array-header">
        <div class="object-header array-header-left" :class="{collapsed: !isExpanded}" @click="toggleExpand">
            <div class="prop-arrow" :class="{expanded: isExpanded}"></div>
            <ui-label>{{getName()}}</ui-label>
        </div>
        <div class="array-header-right">
            <ui-label class="array-length-label">数组长度</ui-label>
            <ui-num-input class="array-length-input" step="1" preci="0" min="0" :value="getArrayLength()"
                @confirm="onModifyArrayLength($event.target.value)"></ui-num-input>
        </div>
    </div>
    <div class="array-content" :class="{collapsed: !isExpanded}">
        <prop-node v-for="index in getArrayLength()" :key="index - 1" :propname="String(index - 1)"
            :props="props.children" :datavalue="getValue(index - 1)" @change="onChildValueChange">
        </prop-node>
    </div>
</div>